import React from "react";
import { Button, Flex, Form, Input } from "antd";
import { PlusOutlined, SearchOutlined } from "@ant-design/icons";
import { useAppDispatch } from "@/store";
import {
  get_sysConfig_page_list,
  set_is_show_config_modal,
  set_sys_config_page_params,
} from "@/store/slice/sysConfig";
import { global_const } from "@/utils/constent";

function SysConfigSearch() {
  const [form] = Form.useForm();
  const dispatch = useAppDispatch();
  function searchQuery() {
    const params = {
      current: 1,
      size: global_const.default_page_size,
      query: form.getFieldValue("query"),
    };
    dispatch(set_sys_config_page_params(params));
    dispatch(get_sysConfig_page_list(params));
  }

  function handleAddClick() {
    dispatch(
      set_is_show_config_modal({
        show: true,
        mode: 1,
        title: "新增系统参数",
        data: {},
      })
    );
  }
  return (
    <>
      <div className="table-header">
        <div className="table-header-left">系统参数</div>
        <div className="table-header-right">
          <Form form={form} layout="inline">
            <Form.Item name="query">
              <Input placeholder="编码/值" allowClear />
            </Form.Item>
            <Form.Item>
              <Flex gap="small" wrap>
                <Button
                  onClick={searchQuery}
                  type="primary"
                  icon={<SearchOutlined />}
                >
                  查询
                </Button>
                <Button
                  onClick={handleAddClick}
                  type="primary"
                  icon={<PlusOutlined />}
                >
                  新增
                </Button>
              </Flex>
            </Form.Item>
          </Form>
        </div>
      </div>
    </>
  );
}
export default React.memo(SysConfigSearch);
